"use client";

import { Loader2, TriangleAlert } from "lucide-react";
import Link from "next/link";

import { useProjectsQuery } from "@/hooks/use-projects-query";
import type { ProjectSummary } from "@/lib/types";

interface ScheduleViewProps {
  initialProjects: ProjectSummary[];
}

export function ScheduleView({ initialProjects }: ScheduleViewProps) {
  const { data: projects, isLoading, error } = useProjectsQuery(initialProjects);

  if (isLoading && (!projects || projects.length === 0)) {
    return (
      <div className="flex min-h-[200px] items-center justify-center rounded-lg border border-border bg-card/60">
        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
      </div>
    );
  }

  if (!projects || projects.length === 0) {
    return (
      <div className="rounded-lg border border-dashed border-border bg-card/50 p-6 text-sm text-muted-foreground">
        暂无排产记录。可联系管理员导入项目计划或在后续迭代中开放在线编辑功能。
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {error ? (
        <div className="flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-4 py-3 text-xs text-destructive">
          <TriangleAlert className="h-4 w-4" />
          排产数据刷新失败，请稍后重试。
        </div>
      ) : null}
      <div className="overflow-hidden rounded-lg border border-border">
        <table className="min-w-full divide-y divide-border text-sm">
          <thead className="bg-muted/40 text-muted-foreground">
            <tr>
              <th className="px-4 py-3 text-left font-medium">项目</th>
              <th className="px-4 py-3 text-left font-medium">当月目标</th>
              <th className="px-4 py-3 text-left font-medium">当前产值</th>
              <th className="px-4 py-3 text-left font-medium">进度</th>
              <th className="px-4 py-3 text-left font-medium">操作</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-border bg-card">
            {projects.map((project) => (
              <tr key={project.id}>
                <td className="px-4 py-3">
                  <div className="flex flex-col">
                    <span className="font-medium text-foreground">{project.name}</span>
                    <span className="text-xs text-muted-foreground">项目编号：{project.id}</span>
                  </div>
                </td>
                <td className="px-4 py-3 text-muted-foreground">
                  {project.monthlyTarget != null ? project.monthlyTarget.toLocaleString() : "--"}
                </td>
                <td className="px-4 py-3 text-muted-foreground">
                  {project.currentValue != null ? project.currentValue.toLocaleString() : "--"}
                </td>
                <td className="px-4 py-3">
                  <div className="flex items-center gap-3">
                    <div className="h-2 w-32 overflow-hidden rounded-full bg-muted">
                      <div
                        className="h-2 rounded-full bg-primary"
                        style={{ width: `${Math.min(project.progressPercentage ?? 0, 100)}%` }}
                      />
                    </div>
                    <span className="text-xs font-medium text-primary">
                      {project.progressPercentage != null ? `${project.progressPercentage}%` : "--"}
                    </span>
                  </div>
                </td>
                <td className="px-4 py-3 text-xs text-primary">
                  <Link href={`/projects/${project.id}`}>查看详情</Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
